<template>
	<view>
		<uv-navbar :safeAreaInsetTop="true" :placeholder="true" :fixed="true">

			<template v-slot:left>

				<uv-search readonly @click="toSearch" searchIcon="search" :disabled="true" :showAction='false'>
					<template v-slot:prefix>
						<uv-icon name="arrow-down" label="全国" label-pos="left" @click="tolocal"></uv-icon>
					</template>
				</uv-search>

			</template>
		</uv-navbar>

		<view class="margin-left-sm margin-right-sm">
			<uv-swiper :list="bannerlist" keyName="image" imgMode="scaleToFill"></uv-swiper>
		</view>
		<view class="padding-top padding-bottom-sm bg-white">
			<uv-grid v-if="gridlist.length" :col="gridlist.length">
				<uv-grid-item v-for="item in gridlist" :key="item.id" @click="topages(item)">
					<uv-image :src="item.image" height="35px" width="35px"></uv-image>
					<uv-text align="center" :text="item.title" :size="12" margin="10px 0 0 0" color="#999)"></uv-text>
				</uv-grid-item>
			</uv-grid>
		</view>
		<view v-if="userInfo.gzhstatus!='1'" class="gzh-tips">
			<uv-text color="#3c9cff" prefixIcon="info-circle" text="微信提醒无法接收!"
				:iconStyle="{Color:'#3c9cff',MarginRight:'3px'}"></uv-text>
			<uv-line margin="20rpx 0" color="#68b2ff"></uv-line>
			<view class="gzh-tips_bottom">
				<view class="tips">您还未关注“瑕疵车”公众号</view>
				<uv-button color="#3c9cff" size="small" text="立即关注" @click="togzh"></uv-button>
			</view>
		
		</view>


		<uv-tabs :list="tablist" @change="changeTabs" :customStyle="tbsCustomStyle" :lineWidth="40" :scrollable="false"
			:itemStyle="{height:'55px',FontSize:'22px'}"></uv-tabs>
		<view v-if="tabactive==0">
			<fy-car-item v-for="item in list" :key="item.id" :carInfo="item"></fy-car-item>
		</view>
		<view v-else>
			<fy-need-item v-for="item in list" :key="item.id" :needInfo="item"></fy-need-item>
		</view>

		<uv-load-more :status="status" @loadmore="loadMore" :height="40" :marginTop='10' :marginBottom='10' />
		<view class="index_pub_box boxbottom">
			<view class="index_pub_box_content animation-zoom" @click="showaction">
				<text class="">+ 发车/求购</text>

			</view>
		</view>
		<uv-popup ref="ref_popup" mode="bottom" :round="15">
			<view class="pop-publish">
				<view class="padding-tb-lg text-lg text-center text-bold">发布</view>
				<uv-row>
					<uv-col :span="6">
						<uv-button :customStyle="btncust" @click="onSelect('/pages/car/publish')">
							<view class="padding-tb-lg">
								<view class="img-border margin-bottom-sm">
									<uv-image src="/static/sellcar.png" width="40px" height="40px"></uv-image>
								</view>
								<uv-text align="center" text="发布车源"></uv-text>
							</view>


						</uv-button></uv-col>
					<uv-col :span="6">
						<uv-button :customStyle="btncust" @click="onSelect('/pages/needbuy/index')">
							<view class="padding-tb-lg">
								<view class="img-border qiugou margin-bottom-sm">
									<uv-image src="/static/buycar.png" width="40px" height="40px"></uv-image>
								</view>
								<uv-text align="center" text="发布求购"></uv-text>
							</view>
						</uv-button></uv-col>
				</uv-row>

			</view>

		</uv-popup>

	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { queryAllUploadCarInfo, getAllNeedBuyInfo, getBannerImgs, getCustMenu } from '@/utils/http.js'
	import baseconfig from '@/config.js'
	import { encryptphone, timespantoYMD, navigatetopage } from '@/common/tools.js'
	export default {
		data() {
			return {
				tablist: [{ name: '同行车源' }, { name: '同行求购' }],

				tabactive: 0,
				tbsCustomStyle: { BackgroundColor: '#fff', MarginTop: '10px' },
				list: [],
				bannerlist: [],
				gridlist: [],
				total: 0,
				status: 'loadmore',
				queryForm: {
					start: 0,
					length: 10,
					iscancel: 0,
					isend: 0
				},

				btncust: {
					padding: '0 5px',
					height: '120px',
					Border: 'none'
				},
			}
		},
		onLoad() {
			this.fetchBanner()

		},
		onShow() {
			this.$store.dispatch('socket/updateTabbarBadge')
			this.fetchList()

		},
		onReachBottom() {
			if (this.status == 'loadmore') {
				this.queryForm.start += this.queryForm.length
				this.fetchList()
			}
		},
		computed: { ...mapState({ token: state => state.user.token }) },
		methods: {
			togzh() {
				uni.navigateTo({
					url: '/pages/mine/gzh'
				})
			},
			topages(item) {
				navigatetopage(item.url)
			},
			tolocal() {
				uni.navigateTo({
					url: "/pages/search/plate?tab=0"
				})
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/search/search?tab=0"
				})
			},

			changeTabs(e) {
				this.tabactive = e.index
				this.list = []
				this.queryForm.start = 0
				this.fetchList()
			},
			topublish() {
				uni.navigateTo({ url: '/pages/car/publish' })
			},
			fetchList() {
				this.status = 'loading'
				if (this.tabactive == 0) {
					this.fetchCar()
				} else {
					this.fetchNeed()
				}


			},
			fetchCar() {
				queryAllUploadCarInfo(this.queryForm).then(res => {
					const { total, rows, count } = res.data
					rows.map(arr => {
						var title = ''
						if (arr.regtime) {
							title += arr.regtime + '上牌|'
						}
						if (arr.mileage) {
							title += arr.mileage + '万公里|'
						}
						if (arr.platelocation) {
							var _add = arr.platelocation.split(" ")
							title += _add[1]
							arr.desc = title
						}

						arr.imglist = []
						var imglist = arr.imgsrc ? arr.imgsrc.split(',') : []
						imglist.forEach(imgarr => {
							arr.imglist.push(baseconfig.api_url + imgarr)
						})
					})
					this.total = total
					Object.assign(this.list, rows)
					if ((this.queryForm.start + this.queryForm.length) >= total) {
						this.status = 'nomore'
					}
				})
			},
			fetchNeed() {
				getAllNeedBuyInfo(this.queryForm).then(res => {
					const { total, rows, count } = res.data
					rows.map(arr => {
						arr.time = timespantoYMD(arr.createtime)
						arr.encry = encryptphone(arr.phone)
					})
					this.total = total
					Object.assign(this.list, rows)
					if ((this.queryForm.start + this.queryForm.length) >= total) {
						this.status = 'nomore'
					}

				})
			},
			fetchBanner() {
				getBannerImgs().then(res => {
					const { data } = res
					data.map(arr => {
						arr.image = baseconfig.api_url + arr.imgsrc
					})
					this.bannerlist = data
				})

				getCustMenu().then(res => {
					const { data } = res
					data.map(arr => {
						arr.image = baseconfig.api_url + arr.imgsrc
					})

					this.gridlist = data
				})
			},
			showaction() {
				this.$refs.ref_popup.open()
			},
			onSelect(e) {
				uni.navigateTo({ url: e })
			},
		}
	}
</script>
<style lang="scss">
	.gzh-tips {
		border: 1px solid #3c9cff;
		background-color: #ecf5ff;
		border-radius: 10upx;
		margin: 20upx;
		padding: 30upx;
	
		&_bottom {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
	
			.tips {
				flex: 1;
				font-size: 26upx;
				color: #555;
			}
	
			._button {
				width: 200upx;
			}
		}
	
	}
	.index-search {
		margin: 10px;
		background-color: #fff;
	}

	.pop-publish {
		text-align: center;
		padding-bottom: 40upx;

		.img-border {
			text-align: center;
			padding: 10px;
			border-radius: 30px;
			background: linear-gradient(to right, #ff8c46, #ff3360);
			box-shadow: 0px 0px 8px 1px #ff8c46;
		}

		.img-border.qiugou {
			background: linear-gradient(to right, #0bbffa, #3d9eff);
			box-shadow: 0px 0px 8px 1px #0bbffa;
		}
	}
	.uv-button--active:before {
		opacity: 0 !important
	}
</style>